<template>
  <el-card class="w-full pt-[5px]">
    <div class="mb-[20px]">
      <el-button @click="handleAdd" type="primary">
        <el-icon class="mr-[5px]"><Plus /></el-icon>
        新增
      </el-button>
      <el-button @click="handleDelSelect">
        <el-icon class="mr-[5px]"><DeleteFilled /></el-icon>
        删除
      </el-button>
    </div>
    <el-table
      :data="tableData"
      class="w-full"
      stripe
      v-loading="loading"
      row-key="id"
      ref="tableRef"
    >
      <el-table-column type="selection" width="40" :selectable="(row) => row.inUse != 1" />
      <el-table-column label="评审方案名称">
        <template #default="{ row }">
          <el-link type="primary" @click="handleShow(row.id)">{{ row.name }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="使用状态" width="100">
        <template #default="{ row }">
          <CustomLabel :map="{ 0: '未使用', 1: '使用中' }" :mapKey="row.inUse"
        /></template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template #default="{ row }">
          <el-button type="primary" size="small" plain @click="handleEdit(row.id)">
            编辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            plain
            @click="handleDel(row.id)"
            v-if="row.inUse != 1"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-[20px] flex justify-end">
      <el-pagination
        v-bind="pagination"
        @update:current-page="currentChange"
        @update:page-size="sizeChange"
      />
    </div>
  </el-card>
  <EditModal ref="editModalRef" @save-success="search" />
  <ViewModal ref="viewModalRef" />
</template>

<script setup>
import useTable from "@/hooks/useTable";
import { getList, delRecords } from "@/api/project/xj/psfasz";
import EditModal from "./components/EditModal.vue";
import ViewModal from "./components/ViewModal.vue";
import CustomLabel from "@/views/project/components/CustomLabel.vue";
import { ElMessage } from "element-plus";
const editModalRef = ref();
const viewModalRef = ref();
const tableRef = ref();
const { loading, pagination, sizeChange, currentChange, tableData, handleDelete, search } =
  useTable((pagin) =>
    getList({
      pageNum: pagin.pageNum,
      pageSize: pagin.pageSize,
    })
  );
//点击新增
const handleAdd = () => {
  editModalRef.value.add();
};
//点击编辑
const handleEdit = (id) => {
  editModalRef.value.edit(id);
};
//点击名称
const handleShow = (id) => {
  viewModalRef.value.view(id);
};
//点击删除
const handleDel = (id) => {
  handleDelete(delRecords, [id]);
};
//批量删除
const handleDelSelect = () => {
  //获取当前选中行
  const selectRows = tableRef.value.getSelectionRows();
  if (!selectRows.length) {
    ElMessage({
      message: "请选择要删除的数据！",
      type: "warning",
    });
    return;
  }
  const ids = selectRows.map((item) => item.id);
  handleDelete(delRecords, ids);
};
</script>

<style scoped lang="scss"></style>
